<template>
  <div class="box">
    <div class="weekday">{{ weekdayText }}</div>
    <p>{{ timeText }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'


const is24HourFormat = ref(true)
const timeText = ref('')
const weekdayText = ref('')

// 补零函数
function padZero(num) {
  return num < 10 ? `0${num}` : num
}

// 获取星期名称
function getWeekdayName(day) {
  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
  return weekdays[day]
}

// 更新时钟
function updateClock() {
  const d = new Date()
  
  // 获取时间组件
  let hours = d.getHours()
  const minutes = d.getMinutes()
  const seconds = d.getSeconds()
  
  // 更新时间显示
  timeText.value = `${padZero(hours)}:${padZero(minutes)}:${padZero(seconds)}${is24HourFormat.value ? '' : ' ' + ampm}`
  
  // 更新日期和星期
  const year = d.getFullYear()
  const month = padZero(d.getMonth() + 1) // 月份从0开始
  const date = padZero(d.getDate())
  const weekday = getWeekdayName(d.getDay())
  
  weekdayText.value = `${year}/${month}/${date} - ${weekday}`
}



// 生命周期钩子
onMounted(() => {
  updateClock() // 初始调用
  const timer = setInterval(updateClock, 1000)
  // 组件卸载时清除定时器
  onUnmounted(() => clearInterval(timer))
})

</script>

<style scoped>
.box {
  height: 100px;
  width: 250px;
  margin: auto;
  text-align: center;
  color: black;
  transition: all 0.3s ease;
}

.box:hover {
  transform: scale(1.02);
}

.box > p {
  line-height: 100px;
  font-size: 40px;
  color: black;
  margin: 0;
  user-select: none;
  transition: all 0.3s;
}


.weekday {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: black;
  font-size: 16px;
  opacity: 0;
  transition: opacity 0.3s;
}

.box:hover .weekday {
  opacity: 1;
}
</style>